余烬缀记

CSS 选择器的优先级规则

edited on:
笔记

选择器优先级由三种类型的计数器决定：

  1. 内联样式：在 HTML 元素的 style 属性上直接编写的样式
  2. ID 选择器：例如 #header
  3. 类选择器、属性选择器和伪类：如 .menu, [type="text"], :hover
  4. 元素和伪元素选择器：如 div, p, ::before

优先级可以看作是由四个部分组成的得分，即 [内联样式得分，ID 选择器得分，类/属性/伪类选择器得分，元素和伪元素选择器得分]。每个部分从 0 开始计算，每出现一个对应类型的选择器，该部分的计数就加 1。最终从左到右开始笔记，得分高的将被引用。

# 例子 

<nav id="nav" class="nav">...</nav>

nav{
    color: blue;
}
#nav{
    color: red;
}
.nav{
    color: green;
}

计算每个选择器的得分：

  • nav 的得分是 [0,0,0,1]（一个元素选择器）
  • #nav 的得分是 [0,1,0,0]（一个 ID 选择器）
  • .nav 的得分是 [0,0,1,0]（一个类选择器）

根据上面的得分得出 #nav 的样式会被应用

# 特殊规则

  • !important: 这个属性会覆盖其他的正常样式规则，但内联样式中的 !important 会覆盖其他位置的 !important 和其他正常的样式规则，因此非必要不要使用。
  • 继承：有些 CSS 属性默认可以从父元素继承，例如 color，它们的优先级最低。
#css